<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
	<p>查看源代码</p>
<!--  app.json :
{
  "pages": [
    "pages/index/index",
    "pages/list/list",
    "pages/detail/detail",
    "pages/message/message",
    "pages/profile/profile"
  ],
  "window": {
    "navigationBarBackgroundColor": "#3a4861",
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "本地生活",
    "backgroundColor": "#bcc0c9",
    "backgroundTextStyle": "light",
    "enablePullDownRefresh": false
  },
  "tabBar": {
    "color": "#999",
    "selectedColor": "#444",
    "backgroundColor": "#fff",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "assets/tabs/home.png",
        "selectedIconPath": "assets/tabs/home-active.png"
      },
      {
        "pagePath": "pages/message/message",
        "text": "消息",
        "iconPath": "assets/tabs/message.png",
        "selectedIconPath": "assets/tabs/message-active.png"
      },
      {
        "pagePath": "pages/profile/profile",
        "text": "我的",
        "iconPath": "assets/tabs/profile.png",
        "selectedIconPath": "assets/tabs/profile-active.png"
      }
    ]
  }
}


utils :
module.exports = (url, data) => {
  return new Promise((resolve, reject) => {
    wx.request({
      url: `https://locally.uieee.com/${url}`,
      data: data,
      success: resolve,
      fail: reject
    })
  })
}


index:
<swiper class="slides">
  <swiper-item wx:for="{{slides}}" wx:key="id">
    <navigator wx:if="{{item.link}}" url="{{item.link}}">
      <image src="{{item.image}}" mode="aspectFill"/>
    </navigator>
    <image wx:else src="{{item.image}}" mode="aspectFill"/>
  </swiper-item>
</swiper>

<view class="grids">
  <navigator class="item" url="/pages/list/list?cat={{item.id}}" wx:for="{{categories}}" wx:key="id">
    <image src="{{item.icon}}"/>
    <text>{{item.name}}</text>
  </navigator>
</view>

<view class="links">
  <image src="/assets/images/link-01.png"/>
  <image src="/assets/images/link-02.png"/>
</view>

index.js:
const fetch = require('../../utils/fetch')

Page({

  /**
   * 页面的初始数据
   */
  data: {
    slides: [],
    categories: []
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    fetch('slides').then(res => {
      this.setData({ slides: res.data })
    })

    fetch('categories').then(res => {
      this.setData({ categories: res.data })
    })



    // wx.request({
    //   // 这里的地址没有跨域的概念
    //   url: 'https://api.douban.com/v2/movie/coming_soon',
    //   header: {
    //     'Content-Type': 'json'
    //   },
    //   success: function (res) {
    //     console.log(res)
    //   }
    // })
    // // 1. 发送异步请求不再是 WEB 那套 AJAX
    // // 2. 没有跨域
    // // 3. 请求的地址必须在管理后台添加白名单
    // // 4. 域名必须备案，服务端必须采用 HTTPS
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})



list :
<view class="search">
  <input placeholder="搜索"/>
  <icon type="search" size="15"/>
</view>

<view class="cells">
  <navigator class="item" wx:for="{{shops}}" wx:key="id" url="/pages/detail/detail?item={{item.id}}">
    <image src="{{item.images[0]}}" mode="aspectFill"/>
    <view class="meta">
      <text class="name">{{item.name}}</text>
      <text class="phone">电话：{{item.phone}}</text>
      <text class="address">地址：{{item.address}}</text>
      <text class="hours">营业时间：{{item.businessHours}}</text>
    </view>
    <view class="score">{{item.score}}</view>
  </navigator>
</view>

<view wx:if="{{hasMore}}" class="loadmore loading">正在加载...</view>
<view wx:else class="loadmore">客官，没有更多了</view>

list.js:
const fetch = require('../../utils/fetch')

Page({
  /**
   * 页面的初始数据
   */
  data: {
    // 当前加载的分类
    category: {},
    // 此分类下的全部店铺
    shops: [],
    pageIndex: 0,
    pageSize: 20,
    hasMore: true
  },

  // 加载下一页数据
  loadMore () {
    if (!this.data.hasMore) return

    let { pageIndex, pageSize } = this.data
    const params = { _page: ++pageIndex, _limit: pageSize }
    return fetch(`categories/${this.data.category.id}/shops`, params)
      .then(res => {
        const totalCount = parseInt(res.header['X-Total-Count'])
        const hasMore = pageIndex * pageSize < totalCount
        const shops = this.data.shops.concat(res.data)
        this.setData({ shops, pageIndex, hasMore })
      })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    fetch(`categories/${options.cat}`).then(res => {
      // // 这里不能确定一定是在 onReady 过后执行
      // wx.setNavigationBarTitle({
      //   title: res.data.name
      // })

      this.setData({ category: res.data })
      wx.setNavigationBarTitle({
        title: res.data.name
      })

      // 加载完分类信息过后再去加载商铺信息
      this.loadMore()
    })

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    if (this.data.category.name) {
      wx.setNavigationBarTitle({
        title: this.data.category.name
      })
    }
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    // 重新加载数据
    this.setData({ shops: [], pageIndex: 0, hasMore: true })
    this.loadMore().then(() => wx.stopPullDownRefresh())
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    // console.log('到底了，别拉了')
    // 在这里加载下一页的数据
    // 需要判断是否正在加载，否则会有多次触发问题
    this.loadMore()
  }
}) -->




</body>
</html>